<template>
    <view class="trade">
      <!-- 头部 -->
    <view class="header_bar header_fixed header_main">
      <view class="header">
        <view class="header-title--white">交易</view>
        <view class="header-right" @tap.stop="$tools.jump('./tradeOrder')">
          <text class="header-right--white">交易订单</text> 
        </view>
      </view>
    </view> 
    <view class="trade-list">
      <view class="trade-list_item" v-for="(item,index) in list" :key="index">
        <view class="top">
          <image class="ico" v-if="item.isNot" src="../../static/trade/trade-not.png" mode="widthFix"></image>
          <image class="ico" v-else-if="!item.isNot&&item.isProgress" src="../../static/trade/trade-in.png" mode="widthFix"></image>
          <image class="ico" v-else-if="!item.isNot&&!item.isProgress" src="../../static/trade/trade-complete.png" mode="widthFix"></image>
          <view class="right">
            开始时间：<text class="time">{{ item.startTime }} - {{ item.endTime }}</text>
          </view>
        </view>
        <view class="content">
          <view class="img-box">
            <image class="img" :src="'../../static/trade/trade-'+item.level+'.png'" mode=""></image>
          </view>
          <view class="right">
            <view class="txt">{{item.name}}</view>
            <view class="flexLeft">
              <view class="day">锁定天数：{{item.days}}天</view>
              <view class="day ml-10">日息：{{ item.radio * 100 }} %</view>
            </view>
            <view class="flexLeft">
              <view class="day">服务费：{{item.fee * 100}}% QFB积分</view>
            </view>
            <view class="flex">
              <view class="num"><image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" /> {{ item.start }} - {{ item.end}}</view>
              <view class="btn"  v-if="item.isProgress"  @tap.stop="goIt(item)">立即参与</view>
              <view class="btn disabled"  v-else>立即参与</view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="trade-list_item">
        <view class="top">
          <image class="ico" src="../../static/trade/trade-in1.png" mode="widthFix"></image>
          <view class="right">
            开始时间：<text class="time">14:00-16:00</text>
          </view>
        </view>
        <view class="content">
          <view class="img-box">
            <image class="img" src="../../static/trade/trade-2.png" mode=""></image>
          </view>
          <view class="right">
            <view class="txt">贫困区</view>
            <view class="day">天数：10天</view>
            <view class="flex">
              <view class="num">2000-4000</view>
              <view class="btn" @tap.stop="goIt()">立即参与</view>
            </view>
          </view>
        </view>
      </view>
      <view class="trade-list_item">
        <view class="top">
          <image class="ico" src="../../static/trade/trade-complete.png" mode="widthFix"></image>
          <view class="right">
            开始时间：<text class="time">14:00-16:00</text>
          </view>
        </view>
        <view class="content">
          <view class="img-box">
            <image class="img" src="../../static/trade/trade-2.png" mode=""></image>
          </view>
          <view class="right">
            <view class="txt">小康区</view>
            <view class="day">天数：15天</view>
            <view class="flex">
              <view class="num">5000-10000</view>
              <view class="btn" @tap.stop="goIt()">立即参与</view>
            </view>
          </view>
        </view>
      </view>
      <view class="trade-list_item">
        <view class="top">
          <image class="ico" src="../../static/trade/trade-in1.png" mode="widthFix"></image>
          <view class="right">
            开始时间：<text class="time">14:00-16:00</text>
          </view>
        </view>
        <view class="content">
          <view class="img-box">
            <image class="img" src="../../static/trade/trade-4.png" mode=""></image>
          </view>
          <view class="right">
            <view class="txt">富人区</view>
            <view class="day">天数：20天</view>
            <view class="flex">
              <view class="num">15000-50000</view>
              <view class="btn" @tap.stop="goIt()">立即参与</view>
            </view>
          </view>
        </view>
      </view> -->
    </view>

    <!-- 弹窗 -->
		<uni-popup ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">请输入预约金额</view>
							<view class="psdBox-input">
								<input type="number" v-model="num" placeholder="请输入预约金额" placeholder-class="inputStyle">
							</view>
              <view class="psdBox-input">
								<input type="password" v-model="password" placeholder="请输入交易密码" placeholder-class="inputStyle">
              </view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('psdPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(psdSubmit,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
  </view>
</template>

<script>

export default {
    data () {
        return {
          isShowPage:true,
          num:'',
          password:'',
          id:'',
          list:[],
          rangTime:[],  // 时间限制
          rangAmount:{
            start:'',
            end:'',
          }, // 数量范围限制
        };
    },
    onLoad () {
      this.init()
    },
      // 下拉刷新
    onPullDownRefresh() {
        this.init();
      setTimeout(function () {
        uni.stopPullDownRefresh();
      }, 500);
    },
    methods: {
      init(){
				this.isShowPage = false;
				this.list = [];
				this.getRecord();
			},
      // 记录
			getRecord(){
				var data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/mate/mateConfig',data, res => {
						if(res.code == 200){
							this.isShowPage = true;
							this.pages = res.data.pages;
							this.list = res.data;
              this.list .forEach(item => {
                const isNot = this.isNotStart(item.startTime)
                this.$set(item,'isNot',isNot)
                // 调用方法 当前时间是否在开始时间结束时间之间
                const isProgress=this.isTimeInRange(item.startTime,item.endTime)
                console.log('isNot',isNot,'isProgress',isProgress)
                this.$set(item,'isProgress',isProgress)
              });
							uni.hideLoading();
						}
					}, err => {
						uni.hideLoading();
					}, 'GET'
				);
			},
      goIt(item){
        this.id = item.id
        this.rangAmount.start = item.start
        this.rangAmount.end = item.end
        this.num = ''
        this.password = ''
        this.openPopup('psdPopup');
      },
      psdSubmit(){
				if (this.num == '' ) {
					return this.$tools.toast('请输入预约金额');
				}
        if (Number(this.num) < Number(this.rangAmount.start) || Number(this.num) > Number(this.rangAmount.end)) {
					return this.$tools.toast('预约金额不能小于'+this.rangAmount.start+'或不能大于'+this.rangAmount.end);
				}
        if (this.password == '' ) {
					return this.$tools.toast('请输入交易密码');
				}
				var data = {
					"configId": this.id,
					"amount": this.num,
          "payPwd":this.$md5(this.password)
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/mate/mateMutual',
				data,
				res => {
						if(res.code == 200){
							this.hidePopup('psdPopup');
              this.$tools.toast(res.msg);
							uni.hideLoading();
						}
					},err => {
						console.log("err：",err);
						this.$tools.toast(err.msg);
						uni.hideLoading();
					}
				)
			},
      // 当前时间是否在8:00-24:00之间
      isTimeInRange(startTime, endTime) {
        // 获取当前时间、开始时间、结束时间的时间戳
        const now = new Date();
        const currentTime = now.getTime();
        const start = new Date();
        const end = new Date();
        start.setHours(startTime.substring(0, 2), startTime.substring(3, 5), 0);
        end.setHours(endTime.substring(0, 2), endTime.substring(3, 5), 0);
        const startTimeMillis = start.getTime();
        const endTimeMillis = end.getTime();
        return currentTime >= startTimeMillis && currentTime <= endTimeMillis;
      },
      // 活动是否未开始
      isNotStart(time){
        const date=new Date()
        const y=date.getFullYear()
        const m=date.getMonth() 
        const d=date.getDate()
        const timeArr=time.split(':')
        // 假设我们要比较的时间点是下午3点30分
        var comparisonTime = new Date(y,m,d,timeArr[0],timeArr[1],timeArr[2]);
        
        // 获取当前时间
        var currentTime = new Date();
        // console.log(timeArr,'currentTime',currentTime,'comparisonTime',comparisonTime)
        
        // 比较当前时间是否小于设定的时间点
        if (currentTime < comparisonTime) {
            // console.log('当前时间小于设定时间点');
            return true
        } else {
            // console.log('当前时间大于或等于设定时间点');
          return false
        }
      },
      /* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
    },
};
</script>

<style lang="scss" scoped>
.header_bar{
  background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
}
.trade{
  padding-bottom: 24rpx;
  &-list{
    overflow: hidden;
    &_item{
      width: 91.4%;
      margin: auto;
      margin-top: 24rpx;
      border-radius: 16rpx;
      overflow: hidden;
      .top{
        background: #F4EBE1;
        padding: 10rpx 30rpx;
        @include flexBetween;
        .ico{
          width: 184rpx;
        }
        .right{
          font-size: 28rpx;
          color: #000;
        }
      }
      .content{
        padding: 34rpx 24rpx;
        background: #fff;
        @include flexLeft;
        .img-box,.img{
          height: 208rpx;
          width: 208rpx;
        }
        .right{
          width: calc(100% - 208rpx);
          height: 208rpx;
          padding-left: 24rpx;
          @include flexCenterColumn;
          align-items: stretch;
          .txt{
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
          }
          .flexLeft{
            @include flexLeft;
          }
          .ml-10{
            margin-left: 20rpx;
          }
          .day{
            margin-top: 16rpx;
            // width: 170rpx;
            padding: 0 20rpx;
            text-align: center;
            height: 48rpx;
            line-height:48rpx ;
            background: #F3F3F3;
            border-radius: 1998rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #666666;
          }
          .ico{
            width: 48rpx;
            display: inline-flex;
            vertical-align: middle;
          }
        }
        .flex{
          @include flexBetween;
          margin-top: 22rpx;
          .num{
            font-weight: 500;
            font-size: 34rpx;
            color: #000000;
          }
          .btn{
            width: 138rpx;
            text-align: center;
            height: 60rpx;
            line-height:60rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
            border-radius: 16rpx;
            background:linear-gradient( 180deg, #FA6A45 0%, #F94123 100%) ;
          }
          .disabled{
            background: #999;
          }
        }
        .mt-0{
          margin-top: 0;
        }
      }
    }
  }
}
</style>
